<template>
  <div class="case-manage-scene-wrapper">
    <div class="search-wrapper">
      <Row>
        <Col span="18">
          <Col span="24" class="col-height center-vertical">
            <div class="search-item">
              <span class="search-item-name">机构</span>
              <Select v-model="model1" style="width: 200px">
                <Option
                  v-for="item in cityList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </div>
            <div class="search-item">
              <span class="search-item-name">机构</span>
              <Select v-model="model1" style="width: 200px">
                <Option
                  v-for="item in cityList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </div>
            <div class="search-item">
              <span class="search-item-name">机构</span>
              <Select v-model="model1" style="width: 200px">
                <Option
                  v-for="item in cityList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </div>
            <div class="search-item">
              <span class="search-item-name">机构</span>
              <Select v-model="model1" style="width: 200px">
                <Option
                  v-for="item in cityList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </div>
          </Col>
          <Col span="24" class="col-height center-vertical">
            <Input
              search
              enter-button="Search"
              placeholder="Enter something..."
              style="width: 360px"
            />
            <span class="case-num">提纲书:45/24</span>
          </Col>
        </Col>
        <Col span="6" class="col-height">
          <Col span="24" class="col-height end">
            <Button type="primary">分配审核</Button>
          </Col>
          <Col span="24" class="col-height end">
            <Button type="primary" @click="makeANewOutLine">新建提纲</Button>
          </Col>
        </Col>
      </Row>
    </div>
    <div class="list-wrapper">
      <div class="list-item" v-for="i in 50" :key="i"></div>
    </div>
    <div class="page-wrapper center ">
        <Page :total="100" />
    </div>
  </div>
</template>

<script>
export default {
  name: "CaseManageScene",
  data() {
    return {
      cityList: [
        {
          value: "New York",
          label: "New York",
        },
        {
          value: "London",
          label: "London",
        },
        {
          value: "Sydney",
          label: "Sydney",
        },
        {
          value: "Ottawa",
          label: "Ottawa",
        },
        {
          value: "Paris",
          label: "Paris",
        },
        {
          value: "Canberra",
          label: "Canberra",
        },
      ],
      model1: "",
    };
  },
  methods:{
    makeANewOutLine(){
      this.$router.push({
        name:"case_edit"
      })
    }
  }
};
</script>

<style lang="less" scoped>
@search-wrapper-bg: #fff;
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.center-vertical {
  display: flex;
  align-items: center;
}
.end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.case-manage-scene-wrapper {
  width: 100%;
  .search-wrapper {
    padding: 0 20px;
    height: 100px;
    width: 100%;
    font-size: 14px;
    background: @search-wrapper-bg;
    .col-height {
      height: 50px;
    }
    .case-num {
      margin-left: 20px;
    }
    .search-item {
      .search-item-name {
        margin-right: 5px;
      }
    }
    .search-item:not(:first-child) {
      margin-left: 20px;
    }
  }
  .list-wrapper {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      height: 200px;
      background: skyblue;
      border: 1px solid red;
    }
    @media screen and (max-width: 1399px) {
      .list-item {
        width: 31%;
        min-width: 370px;
        margin: 20px 1%;
      }
    }
    @media screen and (min-width: 1400px) and (max-width: 1699px) {
      .list-item {
        width: 31%;
        margin: 20px 1%;
      }
    }
    @media screen and (min-width: 1700px) and (max-width: 2099px) {
      .list-item {
        width: 23%;
        margin: 20px 1%;
      }
    }
    @media screen and (min-width: 2100px) {
      .list-item {
        width: 19%;
        margin: 20px .5%;
      }
    }
  }
  .page-wrapper{
    width: 100%;
    background: #fff;
    height: 60px;
  }
}
</style>